<template>
  <view :style="[styles]" class="gird">
    <block
      v-if="
        attribute.type === GIRD_TYPE.IMAGE_AND_TEXT ||
        attribute.type === GIRD_TYPE.IMAGE
      "
    >
      <u-grid :border="false" :col="attribute.col">
        <u-grid-item
          v-for="(listItem, listIndex) in attribute.list"
          :key="listIndex"
          @click="handleNavigate(listItem)"
        >
          <view class="grid-item">
            <image
              v-if="listItem.imageUrl"
              :src="listItem.imageUrl"
              :style="[imageOrTextStyle]"
              class="gird-image"
              :class="[`gird-${attribute.type}-image`]"
            />
            <view
              v-else
              class="empty-area"
              :style="[imageOrTextStyle]"
              :class="[`gird-${attribute.type}-image`]"
            />

            <view
              class="grid-text"
              v-if="attribute.type === GIRD_TYPE.IMAGE_AND_TEXT"
              >{{ listItem.text }}</view
            >
          </view>
        </u-grid-item>
      </u-grid>
    </block>
    <block v-else>
      <view
        class="gird-imageLeftAndRight"
        v-if="attribute.type === GIRD_TYPE.IMAGE_RIGHT_AND_LEFT"
      >
        <view class="gird-imageLeftAndRight-item">
          <block>
            <image
              v-if="attribute.list[0] && attribute.list[0].imageUrl"
              :src="attribute.list[0].imageUrl"
              class="gird-imageLeftAndRight-image-right"
              @click="handleNavigate(attribute.list[0])"
            />
            <view
              v-else
              class="empty-area gird-imageLeftAndRight-image-right"
            />
          </block>

          <block>
            <image
              v-if="attribute.list[1] && attribute.list[1].imageUrl"
              :src="attribute.list[1].imageUrl"
              class="gird-imageLeftAndRight-image-right"
              @click="handleNavigate(attribute.list[1])"
            />
            <view
              v-else
              class="empty-area gird-imageLeftAndRight-image-right"
            />
          </block>
        </view>
        <view class="gird-imageLeftAndRight-item">
          <block>
            <image
              v-if="attribute.list[2] && attribute.list[2].imageUrl"
              :src="attribute.list[2].imageUrl"
              class="gird-imageLeftAndRight-image-left"
              @click="handleNavigate(attribute.list[2])"
            />
            <view v-else class="empty-area gird-imageLeftAndRight-image-left" />
          </block>
        </view>
      </view>

      <view
        class="gird-imageLeftAndRight"
        v-if="attribute.type === GIRD_TYPE.IMAGE_LEFT_AND_RIGHT"
      >
        <view class="gird-imageLeftAndRight-item">
          <block>
            <image
              v-if="attribute.list[0] && attribute.list[0].imageUrl"
              :src="attribute.list[0].imageUrl"
              class="gird-imageLeftAndRight-image-left"
              @click="handleNavigate(attribute.list[0])"
            />
            <view v-else class="empty-area gird-imageLeftAndRight-image-left" />
          </block>
        </view>
        <view class="gird-imageLeftAndRight-item">
          <block>
            <image
              v-if="attribute.list[1] && attribute.list[1].imageUrl"
              :src="attribute.list[1].imageUrl"
              class="gird-imageLeftAndRight-image-right"
              @click="handleNavigate(attribute.list[1])"
            />
            <view
              v-else
              class="empty-area gird-imageLeftAndRight-image-right"
            />
          </block>

          <block>
            <image
              v-if="attribute.list[2] && attribute.list[2].imageUrl"
              :src="attribute.list[2].imageUrl"
              class="gird-imageLeftAndRight-image-right"
              @click="handleNavigate(attribute.list[2])"
            />
            <view
              v-else
              class="empty-area gird-imageLeftAndRight-image-right"
            />
          </block>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import { COMPREIFX } from "../../../libs/const/widget";
import { callNavigateHook } from "../../../libs/navigateTo";
const GIRD_TYPE = {
  //imageAndText-图文布局，image-单图片布局，imageLeftAndRight-图片左大右二布局，imageRightAndLeft-图片右大左二布局
  IMAGE_AND_TEXT: "imageAndText",
  IMAGE: "image",
  IMAGE_LEFT_AND_RIGHT: "imageLeftAndRight",
  IMAGE_RIGHT_AND_LEFT: "imageRightAndLeft",
};
export default {
  name: `${COMPREIFX}gird`,
  props: {
    attribute: Object,
    styles: Object,
  },
  computed: {
    imageOrTextStyle({ styles }) {
      const style = {
        // borderRadius: styles.borderRadius,
        width: styles.imageAndTextIconSize,
        height: styles.imageAndTextIconSize,
      };
      return style;
    },
  },
  data() {
    return {
      GIRD_TYPE,
      customerStyle: {
        borderRadius: 0,
      },
    };
  },
  methods: {
    handleNavigate(listItem) {
      if (listItem.navigateType) {
        callNavigateHook({
          type: listItem.navigateType,
          target: listItem,
        });
      } else {
        this.$emit("event", {
          eventName: "girdClick",
          attribute: listItem,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.gird {
  background-color: white;
  padding: 10rpx 0;
  .grid-item {
    padding: 20rpx 0;
    text-align: center;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    position: relative;
    float: left;
  }
  .grid-text {
    box-sizing: border-box;
    margin-top: 16rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #555555;
  }

  .gird-imageAndText-image {
    width: 68rpx;
    height: 68rpx;
  }
  .gird-image-image {
    width: 80rpx;
    height: 80rpx;
  }

  .empty-area {
    background-color: #f3f4f6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    color: #333;
  }

  .gird-imageLeftAndRight {
    display: flex;
    align-items: center;
    .gird-imageLeftAndRight-item {
      flex: 1;
      padding: 20rpx;
    }
    .gird-imageLeftAndRight-image-left {
      width: 100%;
      height: calc(280rpx + 10rpx);
    }
    .gird-imageLeftAndRight-image-right {
      width: 100%;
      height: calc(280rpx / 2);
    }
    .gird-imageLeftAndRight:first-child {
      margin-bottom: 10rpx;
    }
  }
}
</style>
